<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="200px">
        <div>
          <div class="header">
            <img src="../static/imgs/header.9145357a.png" alt="" />
            <p>
              {{ Username }}
              <span>管理员</span>
            </p>
          </div>
        </div>
        <div>
          <el-menu
            :default-active="$route.path"
            :router="true"
            class="el-menu-vertical-demo"
            background-color="#304156"
            text-color="rgb(191, 203, 217)"
            active-text-color="#FFFFFF"
            :unique-opened="true"
          >
            <el-sub-menu index="1">
              <template #title>
                <el-icon><User /></el-icon>
                <span>用户管理</span>
              </template>
              <el-menu-item index="/userlist">
                <el-icon><Menu /></el-icon>
                用户列表</el-menu-item
              >
            </el-sub-menu>
            <el-sub-menu index="2">
              <template #title>
                <el-icon><Checked /></el-icon>
                <span>权限管理</span>
              </template>
              <el-menu-item index="/rolelist">
                <el-icon><Menu /></el-icon>
                角色列表</el-menu-item
              >
              <el-menu-item index="/authlist">
                <el-icon><Menu /></el-icon>
                权限列表</el-menu-item
              >
            </el-sub-menu>
            <el-sub-menu index="3">
              <template #title>
                <el-icon><Goods /></el-icon>
                <span>商品管理</span>
              </template>
              <el-menu-item index="/goodslist">
                <el-icon><Menu /></el-icon>
                商品列表</el-menu-item
              >
              <el-menu-item index="/classparams">
                <el-icon><Menu /></el-icon>
                分类参数</el-menu-item
              >
              <el-menu-item index="/goodsclass">
                <el-icon><Menu /></el-icon>
                商品分类</el-menu-item
              >
            </el-sub-menu>
            <el-sub-menu index="4">
              <template #title>
                <el-icon><Tickets /></el-icon>
                <span>订单管理</span>
              </template>
              <el-menu-item index="/orderlist">
                <el-icon><Menu /></el-icon>
                订单列表</el-menu-item
              >
            </el-sub-menu>
            <el-sub-menu index="5">
              <template #title>
                <el-icon><Histogram /></el-icon>
                <span>数据统计</span>
              </template>
              <el-menu-item index="/datareport">
                <el-icon><Menu /></el-icon>
                数据报表</el-menu-item
              >
            </el-sub-menu>
          </el-menu>
        </div>
      </el-aside>
      <el-container>
        <el-header>
          <div class="myheader">
            <el-icon><Fold /></el-icon>
            <el-popconfirm
              confirm-button-text="是"
              cancel-button-text="否"
              :icon="InfoFilled"
              icon-color="#626AEF"
              title="你确定要退出吗?"
              @confirm="confirmEvent"
              @cancel="cancelEvent"
            >
              <template #reference>
                <el-button type="primary">退出</el-button>
              </template>
            </el-popconfirm>
          </div>
        </el-header>
        <el-main>
          <div class="main">
            <div class="bread">
              <el-breadcrumb :separator-icon="ArrowRight">
                <el-breadcrumb-item :to="{ path: '/' }"
                  >首页</el-breadcrumb-item
                >
                <el-breadcrumb-item v-if="$route.meta.Breaddata">{{
                  ($route.meta.Breaddata as any).parents
                }}</el-breadcrumb-item>
                <el-breadcrumb-item v-if="$route.meta.Breaddata">{{
                  ($route.meta.Breaddata as any).current
                }}</el-breadcrumb-item>
              </el-breadcrumb>
            </div>
            <router-view />
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script lang="ts" setup>
import { ElMessage } from "element-plus";
import router from "@/router";
import { ArrowRight, InfoFilled } from "@element-plus/icons-vue";

import Public from "@/stores/store";
const Pubdata: Idata = Public();
console.log(Pubdata.Userinfo);
let Username = Pubdata.Userinfo.username;

const open = () => {
  ElMessage("登录成功");
};
open();

const confirmEvent = () => {
  localStorage.removeItem("Stytoken");
  ElMessage({
    message: "退出成功",
    type: "success",
  });
  router.replace("/Login");
};
const cancelEvent = () => {
  ElMessage({
    message: "取消退出",
    type: "success",
  });
};
</script>
<style lang="less" scoped>
.common-layout {
  .el-container {
    height: 100vh;
    .el-aside {
      height: 100vh;
      background: #304156;
      transition: 0.5s;
      .header {
        width: 100%;
        text-align: center;
        margin-top: 50px !important;
        margin: 10px 0;
        color: #fff;
        font-size: 18px;
        img {
          width: 60px;
          height: 60px;
          border-radius: 10px;
        }
        p {
          margin: 10px 0;
          color: #fff;
          font-size: 18px;
        }
      }
    }
    .el-container {
      .el-header {
        background: #f1f1f1;
        --el-header-height: 50px;
        .myheader {
          line-height: 50px;
          font-size: 25px;
          color: #b4b4b4;
          .el-button {
            float: right;
            margin-top: 10px;
          }
        }
      }
      .el-main {
        .main {
          background: #f1f1f1;
          min-height: 550px;
          border-radius: 10px;
          padding: 0 10px;
          box-sizing: border-box;
          padding-bottom: 20px;
          .bread {
            padding: 15px 0;
          }
        }
      }
    }
  }
}
</style>
